
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/layer.min.js' %}"></script>
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <title>注册页面</title>
    <style>
        body {
            height: 100vh;
            background: url({% static 'img/img_4.jpg' %}) no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;

        }
    </style>
</head>
<body>
<div class="container ">
    <div class="row" style="margin-top: 50px">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">注册界面</h3>
                </div>
                <div class="panel-body">

                    <form id="register_form">
                        {# 渲染 csrf token 验证 #}
                        {% csrf_token %}
                        {# 渲染每一个 数据输入框 #}
                        {% for form_obj in register_form %}
                            <div class="form-group">
                                {{ form_obj.label_tag }}
                                {{ form_obj }}
                                <span style="color: red" class="pull-right"></span>
                            </div>
                        {% endfor %}
                        {# 渲染选择头像 #}
                        <div class="form-group">
                            <p>
                                {# 在 label 标签内部 放一个 img 标签 ，点击 img标签可以触发外部的 input 框 #}
                                <label for="selectAvatar">
                                    头像 <img src="{% static 'avatar/default1.png' %}" alt="图片数据正在缓冲 ~~~ "
                                              id="avatar_img" class="img-circle" style="height: 80px;width: 80px">
                                </label>
                                <input type="file" id="selectAvatar" name="avatar" style="display: none">
                            </p>
                        </div>
                        <p>
                            <input type="button" id="btn_register" class="btn btn-success btn-block" value="注册">
                        </p>
                    </form>

                </div>
            </div>

        </div>

    </div>
</div>
<script>
    $(document).ready(
        // 给 上传 头像 input 框添加事件 ：  监听事件 一旦 input 框内的内容发生变化会自动触发的事件
        $("#selectAvatar").change(function () {
            // 【1】借助 阅读器对象 创建阅读器对象
            let fileReader = new FileReader();
            // 【2】获取当前上传 的文件数据
            let avatarData = $(this)[0].files[0];
            // 【3】将文件对象交给 阅读器对象
            fileReader.readAsDataURL(avatarData);
            // 【4】修改 img 标签中的 src 属性
            // 发现 点击 图片上传 img 数据后图片没有刷新，并且 图片数据变为空了
            // $("#avatar_img").attr("src", fileReader.result)
            // 【5】优化没有数据的问题 ： 增加一个等待
            fileReader.onload = function () {
                $("#avatar_img").attr("src", fileReader.result)
            }
        }),

        // 启动Ajax请求
        $("#btn_register").on("click", function () {
            // 因为需要传输文件数据所以需要借助 formData 对象
            let formData = new FormData();
            // 【1】获取到键值对数据
            // 先获取到 form标签中的所有数据的数组 ，然后再遍历数组获取到 索引和数据对象(字典)
            //取得表单内容并插入到网页中：
            $.each($("#register_form").serializeArray(), (index, dataDict) => {
                formData.append(dataDict.name, dataDict.value)
            })
            // 【2】获取文件数据并添加到 formData 对象中
            formData.append("avatar", $("#selectAvatar")[0].files[0])
            // 【3】发送Ajax请求
            $.ajax({
                url: "",
                type: "post",
                data: formData,
                // 设置为 false 是为了防止 jQuery 自动将 formData 转换为字符串格式
                processData: false,
                // 设置为 false 是为了防止 jQuery 自动添加 "Content-Type" 请求头
                contentType: false,
                // 请求成功的回调函数
                success: (response) => {
                    // response 是一个序列化后的 object 对象 (字典) 对象.属性取值
                    if (response.code === 2000) {
                        layer.msg(response.message)
                        window.location.href = response.next_url;
                    } else {
                        //清空错误信息
                        // 渲染错误信息到指定的 span标签中 span 标签的ID值就是 id_属性名
                        $.each(response.errors, (span_id, error_message) => {
                            let tagID = "#id_" + span_id
                            $(tagID).next().text(error_message[0]).parent().addClass("has-error")
                        })
                    }
                }
            })
        }),
        // 添加焦点事件 ----> 负责 当我在有错误信息的 input 框中输入内容的时候取消当前标签的 红色标识 和 下面的 错误信息展示
        $("input").focus(function () {
            $(this).next().text("").parent().removeClass("has-error")
        })
    )
</script>

</body>
</html>